<template>
  <div id="app">
      <router-link to="discover">发现</router-link>
       |
       <router-link to="friend">好朋友</router-link>
       |
       <router-link to="mine">个人中心</router-link>
       |
       <router-link to="list">商品列表</router-link>
       <button @click="jump">一个按钮</button>
     <router-view></router-view>
  </div>
</template>
<script>
//编程式：通过js来控制页面的跳转
export default{
  data(){
    return{
      msg:'app组件'
    }
  },
  methods:{
    jump(){
      //路由传参
      //1.query(url)  刷新数据不会丢失，传递简单数据
      //2.params(内存) 刷新数据会丢失，传递复杂数据 例如 二进制 数据流

      //push 直接跳转，添加一个历史记录
      this.$router.push("/mine")
      //this.$router.push({ path:"/mine"})

      //传递query参数
      //this.$router.push({ path:"/mine", query:{ name:"李磊"}})
      
      //传递state & params
      //this.$router.push({path:"/mine",params:{name:"李磊"}})
      //this.$router.push({name:"mine",params:{name:"李磊"}})
      //params传递时的问题
        //刷新页面，数据会丢失
      
      //replace 和push特性一致，区别是replace会替换上一个历史记录
      //this.$router.replace({ path:"/mine"})

      //go(数字) 横跨历史记录
      //this.$router.go(-2)
      
      //back 返回
      //this.$router.back()

      //forward 前进
    }
  }
}
</script>